<div id="#app">
  {{title}}
</div>

<script>
  const Vue =  {
    // 扩展性
    createRenderen({querySelector, insert}) {
        // 返回渲染器
        return {
            createApp(options) {
            return {
                mount (parent) {
                // 1. 找到父元素
                const parentElement = document.querySelector(parent)
                // 2. 编译模板
                if(!options.render) {
                    // 2.1 处理template:编译
                    options.render = this.compile(parent.innerHTML)
                }

                // setup和其他选项
                if(options.setup) {
                    this.setupState = options.setup()
                }
                if(options.data) {
                    this.data = options.data()
                }
                // 用户访问this.**都是从setup，或者data上面取得
                new Proxy(this, {
                    get(target, key) {
                        // 先从setup取，如果取不到在从data中取
                        if(target.setupState && key in target.setupState) {
                            return target.setupState[key]
                        } else {
                            return target.data[key]
                        }
                    },
                    set(target,key, val) {
                        if(target.setupState && key in target.setupState) {
                            target.setupState[key] = val
                        } else {
                            target.data[key] = val
                        }
                    }
                })
                // 2.2 用户直接编写rende
                const el = options.render.call(proxy)
                // 3. 追加到宿主
                parentElement.innerHTML = ''
                // parent.appendChild(el)
                insert(el, parentElement)
            },
                compile(template) {
                    // 返回一个render
                    return function render() {
                        const h3 = document.createElement('h3')
                        h3.textContent = this.title
                    }
                }
            }
        }
            }
        },
    
    createApp(options) {
        // 创建一个web品太特有渲染器
        const render = Vue.createRenderen({
            querySelector(sel) {
                return document.querySelector(sel)
            },
            insert (el, parent) {
                parent.appendChild(el)
            }
        })
        return render.createApp()
    }
}


  const app = Vue.createApp({
      data () {
          return {
              title: 'hello,vue3!'
          }
      },
      setup() {
          return {
              title: 'vue3, hello'
          }
      }
  })
  app.mount('#app')
</script>
